//添加执行人
//后期可改造复用，传call_back
import React, {Component} from 'react'
import {View, Text, ScrollView, Image, TouchableOpacity, TouchableWithoutFeedback, TextInput} from 'react-native'
import CheckBox from 'react-native-checkbox';
import Loading from '../common/loading'
import styles from '../../configs/styles'
import {GetUsersApi} from '../../configs/api'
import Icon from 'react-native-vector-icons/Ionicons'
import Helper from '../../helpers'

class UserSelect extends Component {
  static navigationOptions = ({navigation}) => {
    return {
      header: null
    }
  };

  //初始化props和state
  constructor(props) {
    super(props);
    const params = props.navigation.state.params || {}
    this.state = {
      loading: true,
      data: [],
      filtered_ids: [],
      searchText: '',
      selected_user_ids: params.user_ids || [],
      this_selected_user_ids: [],
      call_back: params.call_back
    }
  }

  componentDidMount() {
    this.getData()
  }

  getData = () => {
    GetUsersApi().then((data) => {
      this.setState({
        data: data.users,
        loading: false,
      })
    })
  };

  _filter_name = (str)=>{
    let filtered_ids = []
    const data = this.state.data
    if(str!=null && str!=''){
      data.forEach((t)=>{
        let name = `${t.name}`,
            login = `${t.login}`
        if(name.indexOf(str)<0 && login.indexOf(str)<0)
          filtered_ids.push(t.id)
      })
    }
    this.setState({filtered_ids})
  }

  _toggle_user = (user_id) => {
    let this_selected_user_ids = this.state.this_selected_user_ids
    if(this_selected_user_ids.includes(user_id)){
      this_selected_user_ids.splice(this_selected_user_ids.indexOf(user_id),1)
    }else{
      this_selected_user_ids.push(user_id)
    }
    this.state.this_selected_user_ids = this_selected_user_ids
  }


  _select_check_box = (item)=>{
    const {selected_user_ids} = this.state
    if(selected_user_ids.includes(item.id)){
      return <Text style={[styles.apply_info_text,{marginTop: 5}]}>已添加</Text>
    }else{
      return (
        <CheckBox onChange={()=>this._toggle_user(item.id)} label='' checkboxStyle={{marginTop: 10, width: 16, height: 16}}/>
      )
    }
  }
  //每一条item的模板
  _renderItem = (item) => {
    const filtered_ids = this.state.filtered_ids
    if(filtered_ids.includes(item.id)){
      return null
    }else{
      return (
        <View key={item.id}>
          <View style={{ flexDirection: 'row', padding: 10, marginLeft: 5, marginRight: 5, borderBottomWidth: 1, borderBottomColor: '#dbdee3'}}>
            <View style={{flex: 1, flexDirection: 'row'}}>
              <Image source={Helper.avatar(item.full_avatar)} style={styles.avatar}/>
              <View><Text style={[styles.apply_info_text, {marginTop: 12, marginLeft: 10}]}>{item.name}({item.login})</Text></View>
            </View>
            <View style={{marginTop: 5}}>
              {this._select_check_box(item)}
            </View>
          </View>
        </View>
      )
    }

  };

  _custom_header = ()=>{
    return (
      <View style={{height: 40, marginTop: 20, paddingTop: 10, backgroundColor: 'white', flexDirection: 'row'}}>
        <View style={{width: 30, alignItems: 'center'}}>
          <Icon name={'ios-arrow-back'} size={30} style={[styles.text_blue, {}]} onPress={()=>this.props.navigation.goBack()}/>
        </View>
        <View style={{flex: 1, marginRight: 10}}>
          <TextInput placeholder={'搜索姓名/登录名'}
                     onChangeText={(v)=>{this._filter_name(v)}}
                     autoCapitalize={'none'}
                     style={{height: 30, backgroundColor: 'lightgrey', borderRadius: 5, paddingLeft: 10}}/>
        </View>

      </View>
    )
  }
  _submit_selection = ()=>{
    this.state.call_back(this.state.this_selected_user_ids)
    this.props.navigation.goBack()
  }
  render() {
    const {loading, data} = this.state;
    if (loading) {
      return <Loading/>
    } else {
      return (
        <View style={{flex: 1}}>
          {this._custom_header()}
          <ScrollView bounces={false} style={{flex: 1, backgroundColor: 'white'}}>
            {data.map((item)=> this._renderItem(item))}
          </ScrollView>
          <View style={{backgroundColor: 'white'}}>
            <TouchableOpacity style={styles.apply_operation}
                              onPress={this._submit_selection}>
              <Text style={{color: 'white'}}>提交</Text>
            </TouchableOpacity>
          </View>
        </View>
      )
    }

  }
}

export default UserSelect